<style lang="less" scoped>
  #calendar {
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
    color: #333;
  }

  .event-title {
    color: indianred;
  }

  // @import "styles/bootstrap-datepicker.min.css";
  // @import "styles/bootstrap-year-calendar.min.css";
  // @import "styles/bootstrap-3.3.5/css/bootstrap.min.css";
</style>
<style>
  #calendar > .panel {
    border: none !important;
    box-shadow: none !important;
  }
</style>
<template>
  <div>
    <div id="calendar" style="padding-bottom: 20px"></div>
  </div>
</template>
<script>
  import util from 'util'

  export default {
    props: {
      dataSource: Array
    },
    data() {
      return {}
    },
    methods: {
      initCalendar() {
        let thus = this;
        $('#calendar').calendar({
          enableContextMenu: true,
          enableRangeSelection: true,
          selectRange: function (e) {
            thus.$emit('recordTodos', util.formatDate(e.startDate, "YY-MM-DD"));
          },
          mouseOnDay: function (e) {//hover时查看当天信息
            //e..events是当前信息的数据dataSource
            if (e.events.length > 0 && e.events[0].plan) {
              let content = '';
              for (let i in e.events) {
                if (!e.events[i].text) {
                  e.events[i].text = '暂无'
                }
                if (e.events[i].plan) {
                  content += '<div class="event-tooltip-content">'
                    + '<div style="color:black"><span style="color:rgb(156, 183, 3);font-weight:bold">名称</span> : ' + e.events[i].task + '</div>'
                    + '<div style="color:black"><span style="color:rgb(156, 183, 3);font-weight:bold">类型</span> : ' + e.events[i].modules + '</div>'
                    + '<div style="color:black"><span style="color:rgb(156, 183, 3);font-weight:bold">备注</span> : ' + e.events[i].text + '</div>'
                    + '</div>';
                }
              }
              let getOffsetRight = function (obj) {
                let tmp = obj.offsetLeft;
                let val = obj.offsetParent;
                while (val != null) {
                  tmp += val.offsetLeft;
                  val = val.offsetParent;
                }
                tmp = window.innerWidth - tmp - obj.offsetWidth;
                return tmp;
              };
              let minWidth = getOffsetRight($(e.element)[0]);
              $(e.element).popover({
                trigger: 'manual',
                container: 'body',
                html: true,
                content: content,
                placement:minWidth > 500?'right':'left'
              });
              $(e.element).popover('show');
            }
          },
          mouseOutDay: function (e) {
            if (e.events.length > 0) {
              $(e.element).popover('hide');
            }
          },
          dayContextMenu: function (e) {
            $(e.element).popover('hide');
          },
          dataSource: thus.dataSource
        });
        $('#calendar').data('calendar').setStyle('background');
      }
    },
    mounted() {
      this.initCalendar();
    }
  }
</script>
